<template>
    <div class="button-bar" :ref="barRefName">
      <form>
        <div class="button-bar-div" ref="button-bar-div">
          <slot></slot>
        </div>
      </form>
    </div>
</template>

<script>
export default {
  name: "ToolBarComponent",
  data(){
    return{
      submitInput:{},
      submitParams: {}
    }
  },
  props:{
    barRefName:String,
    minHeight:String
  },
  methods:{
    inputRegist:function (name, Object){
      this.submitInput[name] = Object;
    },
    inputUnRegist:function (name){
      delete this.submitInput[name];
    },
    getSubmitParams:function (){
      this.submitParams = {};
      for(let inputComp in this.submitInput){
        let pararm = this.submitInput[inputComp].getInputValue();
        this.submitParams[pararm["name"]]=pararm["value"];
      }
      return this.submitParams;
    },
      getSubmitNotNullParams:function (){
          this.submitParams = {};
          for(let inputComp in this.submitInput){
              let pararm = this.submitInput[inputComp].getInputValue();
              if (null != pararm && null != pararm["value"] && "" != pararm["value"]) {
                  this.submitParams[pararm["name"]]=pararm["value"];
              }
          }
          return this.submitParams;
      }
  },
  beforeMount() {
    this.$on("inputRegist",this.inputRegist);
    this.$on("inputUnRegist",this.inputUnRegist);
  },
  mounted() {
    if(undefined!==this.minHeight){
      this.$refs[this.barRefName].style["min-height"] = this.minHeight;
    }
  }
}
</script>

<style scoped>
    .button-bar{
      width: 100%;
      border-radius: 2px;
      padding-bottom: 2px;
      background: #eeeeff;
      margin-bottom: 10px;
    }
    .button-bar-div{
      border-radius: 2px;
      padding-bottom: 5px;
      padding-top: 5px;
      padding-left: 15px;
      padding-right: 100px;
      text-align: left;
      background: #eeeeff;
    }
</style>